<template>
  <div class="right-main-box-grid">
    <div class="item item1">
      <div class="card-tab" :class="{ activeCard: state.activeCard == item.label }" v-for="item in state.cardList" @click="state.activeCard = item.label">
        <span>{{ item.icon }}</span>
        <span class="label">{{ item.label }}</span>
      </div>
    </div>
    <div class="item item2">
      <div class="title">
        结界智能识别
        <span class="score-box">
          <el-input v-model="state.input" placeholder="评分" style="width: 80px" />
          <el-input v-model="state.input" placeholder="备注" style="width: 220px" />
          <el-button type="success" icon="Check">提交</el-button>
        </span>
      </div>
      <div class="table-box">
        <div class="table-item">
          <el-table :data="state.table1">
            <el-table-column prop="date" label="Date" />
            <el-table-column prop="name" label="Name" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
        <div class="table-item">
          <el-table :data="state.table2">
            <el-table-column prop="date" label="Date" />
            <el-table-column prop="name" label="Name" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="item item3">
      <div class="title">
        影像学分析
        <span class="score-box">
          <el-input v-model="state.input" placeholder="评分" style="width: 80px" />
          <el-input v-model="state.input" placeholder="备注" style="width: 220px" />
          <el-button type="success" icon="Check">提交</el-button>
        </span>
      </div>
      <div class="chart-box">
        <!-- 可以不要  直接画图 -->
        <!-- <div class="top-title"></div> -->
        <div class="chart-item">
          <div class="myChart" id="barChart"></div>
        </div>
        <div class="chart-item">
          <div class="myChart" id="pieChart"></div>
        </div>
        <div class="chart-item">
          <div class="myChart" id="lineChart"></div>
        </div>
      </div>
    </div>
    <div class="item item4">
      <div class="title">
        随访对比
        <span class="score-box">
          <el-input v-model="state.input" placeholder="评分" style="width: 80px" />
          <el-input v-model="state.input" placeholder="备注" style="width: 220px" />
          <el-button type="success" icon="Check">提交</el-button>
        </span>
      </div>

      <div class="image-box">
        <div class="left-image image-item">
          <div class="t">
            <div class="image">
              <el-image style="width: 100px; height: 100px" src="" />
            </div>
            <div class="text">
            </div>
          </div>
          <div class="b">
1
          </div>

        </div>
        <div class="right-image image-item">
          <div class="image">
            <el-image style="width: 100px; height: 100px" src="" />
          </div>
          <div class="text">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, inject } from "vue"
import * as echarts from "echarts"
const state = inject("mainState", {})

/**
 * 创建柱状图
 * 使用 ECharts 创建一个具有渐变色、阴影和点击缩放功能的柱状图。
 */
const chartBar = () => {
  var chartDom = document.getElementById("barChart")
  var myChart = echarts.init(chartDom)
  var option
  // prettier-ignore
  let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '指']
  // prettier-ignore
  let data = [220, 182, 191, 234, 290, 330, 310, 123, 442,]
  let yMax = 500
  let dataShadow = []
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax)
  }
  option = {
    title: {
      text: "特性示例：渐变色 阴影 点击缩放",
    },
    grid: {
      bottom: 10,
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#999",
      },
    },

    series: [
      {
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" },
            ]),
          },
        },
        data: data,
      },
    ],
  }
  option && myChart.setOption(option)
}

/**
 * 创建一个饼图图表
 * 使用echarts库生成一个包含渐变色和阴影的柱状图，点击柱子可以缩放。
 */
const chartPie = () => {
  var chartDom = document.getElementById("pieChart")
  var myChart = echarts.init(chartDom)
  var option
  // prettier-ignore
  let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '指']
  // prettier-ignore
  let data = [220, 182, 191, 234, 290, 330, 310, 123, 442,]
  let yMax = 500
  let dataShadow = []
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax)
  }
  option = {
    title: {
      text: "特性示例：渐变色 阴影 点击缩放",
    },
    grid: {
      bottom: 10,
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#999",
      },
    },

    series: [
      {
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" },
            ]),
          },
        },
        data: data,
      },
    ],
  }
  option && myChart.setOption(option)
}

/**
 * 创建并初始化一个线形图
 */
const chartLine = () => {
  var chartDom = document.getElementById("lineChart")
  var myChart = echarts.init(chartDom)
  var option
  // prettier-ignore
  let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '指']
  // prettier-ignore
  let data = [220, 182, 191, 234, 290, 330, 310, 123, 442,]
  let yMax = 500
  let dataShadow = []
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax)
  }
  option = {
    title: {
      text: "特性示例：渐变色 阴影 点击缩放",
    },
    grid: {
      bottom: 10,
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      z: 10,
    },
    yAxis: {
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#999",
      },
    },

    series: [
      {
        type: "bar",
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#83bff6" },
            { offset: 0.5, color: "#188df0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#2378f7" },
              { offset: 0.7, color: "#2378f7" },
              { offset: 1, color: "#83bff6" },
            ]),
          },
        },
        data: data,
      },
    ],
  }
  option && myChart.setOption(option)
}

onMounted(() => {
  chartBar()
  chartPie()
  chartLine()
})
</script>

<style scoped lang="scss">
.right-main-box-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 2.2fr 2.2fr 4fr;
  gap: 30px;

  .item {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .title {
      height: 30px;
      line-height: 30px;
      color: red;
      margin-bottom: 20px;
      font-weight: bolder;
      font-size: 20px;

      color: transparent;
      font-family: AlibabaPuHuiTi-2-85-Bold;
      background: linear-gradient(to bottom right, #11cbe4, #ffffff 70%, #15bc98);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      .score-box {
        float: right;
        color: #fff;
        font-size: 12px;
        -webkit-text-fill-color: initial !important;
      }
    }
  }

  .item1 {
    background-color: salmon;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 4px;

    .card-tab {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #fff;

      &.activeCard {
        // background-color: red;
        background: linear-gradient(to bottom right, #607de7da, #3d05be);
        /* 边框宽度 */
        border-width: 2px;
        /* 边框样式 */
        border-style: solid;
        border-color: transparent;
        /* 渐变边框 不能和border-radius同时使用 */
        // border-image: linear-gradient(to right, #3d05be, #607de7da) 1;
        border-radius: 10px;
      }
    }
  }

  .item2 {
    // background-color: white;
    display: flex;
    flex-direction: column;

    .table-box {
      width: 100%;
      flex: 1;
      display: flex;
      overflow: auto;

      .table-item {
        flex: 1;
        padding: 0 20px;
        display: flex;
        overflow: auto;
      }
    }
  }

  .item3 {
    background-color: aquamarine;
    display: flex;
    flex-direction: column;

    .chart-box {
      flex: 1;
      display: flex;
      flex-direction: row;

      .chart-item {
        flex: 1;
        width: 100%;
        position: relative;
        display: flex;

        .myChart {
          width: 100%;
        }
      }
    }
  }

  .item4 {
    background-color: firebrick;
    display: flex;
    flex-direction: column;

    .image-item {
      display: flex;
flex-direction: column;
      .t {
        flex: 1;

        .image {}

        .text {
          display: flex;
          flex-direction: column;
        }
      }

      .b {
        height: 200px;
      }

    }

    .image-box {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
  }
}
</style>
